$color: red;
$boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.12);

div:focus {
  outline: none;
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  appearance: none !important;
  margin: 0;
}

input[type='number'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  -o-appearance: textfield;
  -ms-appearance: textfield;
  appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
// 选中样式
.selectColor {
  color: var(--color-select);

  .box_item {
    border: 2px solid var(--color-select) !important;
    background-color: rgba(144, 244, 98, 0.2);
    box-shadow: 0.5px 0.5px 10px var(--color-select);

    img {
      transform: translateY(-40px);
      filter: drop-shadow(var(--color-select) 0 40px);
    }
  }
}

.selectColorType {
  color: var(--color-select);
  border: 2px solid var(--color-select) !important;
  background-color: rgba(144, 244, 98, 0.2) !important;

  img {
    transform: translateY(-50px);
    filter: drop-shadow(var(--color-select) 0 50px);
  }
}

.selectColorGame {
  color: var(--color-select);
  border: 2px solid var(--color-select) !important;
  background-color: rgba(144, 244, 98, 0.2) !important;
  box-shadow: 0.5px 0.5px 10px var(--color-select);

  img {
    transform: translateY(-50px);
    filter: drop-shadow(var(--color-select) 0 50px);
  }
}

// 心跳的动画效果
.an_breathe {
  animation: breathe 5s infinite;
  animation-timing-function: ease-in-out;
}

// 弹窗的最大高度设置
.dialogMaxHeight {
  max-height: 620px;
  overflow: auto;
  z-index: 100000000;

  .el-scrollbar__wrap {
    min-height: 450px !important;
    max-height: 450px !important;
    overflow: auto;
  }
}

// 弹窗的最大高度设置(有分页)
.dialogMax {
  height: 650px !important;
  z-index: 100000000;
}

// 弹窗的最大高度设置(有筛选条件 有分页)
.dialogMaxQuery {
  height: 720px !important;
}

.borderTop {
  border-top: 1px solid #ededed;
}

.borderBottom {
  border-bottom: 1px solid #ededed;
}

// 游戏图标
.game-icon {
  width: 30px;
  border-radius: 50%;
}

.gameIcon {
  display: flex;
  align-items: center;

  div {
    width: 45%;
    margin-right: 5px;

    &:first-child {
      text-align: right;
    }
  }
}

// 文字下划线
.details {
  cursor: pointer;
  text-decoration: underline; //设置下划线
  text-underline-offset: 3px; //下划线和文字间距
  text-decoration-color: rgba(100, 149, 237); //下划线颜色
}

// 禁止鼠标事件 === 达到禁止用户操作
.disableUser {
  &>* {
    pointer-events: none;
  }
}

// 禁止操作背景色
.disableUserBg {
  &>* {
    pointer-events: none;
  }

  background-color: #999999;
  opacity: 0.8;
}

// 暂无数据
.noDataAvailable {
  width: 30%;
  text-align: center;
  margin: 20% auto;
  color: #999999;
}

.box-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.box-text {
  font-size: 15px;
  color: var(--color-select);
}

.colorGre {
  color: green;
  font-size: 15px;
  font-weight: 600;
}

.colorYe {
  color: #e6a23c;
  font-size: 15px;
  font-weight: 600;
}

.colorRed {
  color: crimson;
  font-size: 15px;
  font-weight: 600;
}

.colorText {
  font-size: 15px;
  font-weight: 600;
}

.mustPass {
  color: crimson;
  font-size: 18px;
  font-weight: 600;
  margin-left: 1px;
}

.noMustPass {
  display: none;
}

.colorGreen {
  color: green;
}

.colorCorn {
  color: #6495ed;
}

.colorDark {
  color: #e9966a;
}

.colorBurl {
  color: #deb887;
}

.tipsText {
  color: #3c3f44;
  font-size: 12px;
  margin-left: 5px;
  line-height: 20px;
  display: block;
}

.tipsTextRed {
  color: red;
  font-size: 12px;
  margin-left: 5px;
}

.btnStyle {
  width: 97px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
}

/* 文本超出隐藏 */
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

// flex布局
.flex {
  display: flex;
  align-items: center;
}

.flexStart {
  display: flex;
  align-items: flex-start;
}

.flexStartDetween {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flexRightDetween {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}

.flexAround {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexEvenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.flexWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flexWrapCenter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flexWrapDetween {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flexWrapStartDetween {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.flexWrapStartEvenly {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
}

// 朝下走 往右边排
.flexWrapDownRight {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flexWrapAround {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.width5 {
  width: 5%;
}

.width10 {
  width: 10%;
}

.width15 {
  width: 15%;
}

.width20 {
  width: 20%;
}

.width25 {
  width: 25%;
}

.width30 {
  width: 30%;
}

.width40 {
  width: 40%;
}

.width45 {
  width: 45%;
}

.width50 {
  width: 50%;
}

.width55 {
  width: 55%;
}

.width60 {
  width: 60%;
}

.width70 {
  width: 70%;
}

.width80 {
  width: 80%;
}

.imWidth80 {
  width: 80% !important;
}

.width90 {
  width: 90%;
}

.width100 {
  width: 100%;
}

.imWidth100 {
  width: 100% !important;
}

.width110 {
  width: 110px;
}

.width120 {
  width: 120px;
}

.selectWidth120 {
  width: 120px !important;
}

.width130 {
  width: 130px;
}

.width140 {
  width: 140px;
}

.width150 {
  width: 150px;
}

.selectWidth150 {
  width: 150px !important;
}

.width200 {
  width: 200px;
}

.width240 {
  width: 240px;
}

.formItem240 {
  width: 240px !important;
}

.width280 {
  width: 280px;
}

.formItem280 {
  width: 280px !important;
}

.width320 {
  width: 320px;
}

.formItem320 {
  width: 320px !important;
}

// margin样式
.margin5 {
  margin: 5px;
}

.margin10 {
  margin: 10px;
}

.marginT2 {
  margin-top: 2px;
}

.marginT5 {
  margin-top: 5px;
}

.marginT10 {
  margin-top: 10px;
}

.marginB5 {
  margin-bottom: 5px;
}

.marginB10 {
  margin-bottom: 10px;
}

.marginB15 {
  margin-bottom: 15px;
}

.marginL5 {
  margin-left: 5px;
}

.marginL10 {
  margin-left: 10px;
}

.marginL20 {
  margin-left: 20px;
}

.marginL30 {
  margin-left: 30px;
}

.marginL70 {
  margin-left: 70%;
}

.marginL80 {
  margin-left: 80%;
}

.marginR2 {
  margin-right: 2px;
}

.marginR5 {
  margin-right: 5px;
}

.marginR7 {
  margin-right: 7px;
}

.marginR10 {
  margin-right: 10px;
}

.marginR12 {
  margin-right: 12px;
}

.marginR15 {
  margin-right: 15px;
}

.marginR20 {
  margin-right: 20px;
}

.marginR30 {
  margin-right: 30px;
}

.marginR90 {
  margin-right: 90px;
}

.marginT20 {
  margin-top: 20px;
}

.marginB20 {
  margin-bottom: 20px;
}

.marginLR10 {
  margin: 0 10px;
}

.marginLR20 {
  margin: 0 20px;
}

.marginTB10 {
  margin: 10px 0;
}

.marginTB20 {
  margin: 20px 0;
}

// padding样式
.padding10 {
  padding: 10px;
}

.padding20 {
  padding: 20px;
}

.paddingT10 {
  padding-top: 10px;
}

.paddingB10 {
  padding-bottom: 10px;
}

.paddingL10 {
  padding-left: 10px;
}

.paddingR10 {
  padding-right: 10px;
}

.paddingT20 {
  padding-top: 20px;
}

.paddingB20 {
  padding-bottom: 20px;
}

.paddingL20 {
  padding-left: 20px;
}

.paddingR20 {
  padding-right: 20px;
}

.paddingLR10 {
  padding: 0 10px;
}

.paddingLR20 {
  padding: 0 20px;
}

.paddingTB10 {
  padding: 10px 0;
}

.paddingTB20 {
  padding: 20px 0;
}


// 光点绕圈 利用伪元素和两个i元素产生4条线
.animate-border {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
  }

  i {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 2px;
  }

  &::before {
    top: 0;
    left: -100%;
    background-image: linear-gradient(90deg,
        transparent,
        #03e9f4,
        transparent);

    animation: one 4s linear infinite;
  }

  i:nth-child(1) {
    top: -100%;
    right: 0;
    background-image: linear-gradient(180deg,
        transparent,
        #03e9f4,
        transparent);
    /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
    animation: two 4s linear 1s infinite;
  }

  &::after {
    bottom: 0;
    right: -100%;
    background-image: linear-gradient(-90deg,
        transparent,
        #03e9f4,
        transparent);
    animation: three 4s linear 2s infinite;
  }

  i:nth-child(2) {
    bottom: -100%;
    left: 0;
    background-image: linear-gradient(360deg,
        transparent,
        #03e9f4,
        transparent);
    animation: four 4s linear 3s infinite;
  }
}

/* 加载中样式 */
.layui-m-layer {
  position: relative;
  z-index: 19891014;
}

.layui-m-layershade {
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.layui-m-layermain,
.layui-m-layershade {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.layui-m-layer * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.layui-m-layershade {
  background: white;
  opacity: 0.5;
}

.layui-m-layermain {
  display: table;
  font-family: Helvetica, arial, sans-serif;
  pointer-events: none;
}

.layui-m-layermain,
.layui-m-layershade {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.layui-m-layermain .layui-m-layersection {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.layui-m-layer2 .layui-m-layerchild {
  width: auto;
  max-width: 260px;
  min-width: 40px;
  border: none;
  background: none;
  box-shadow: none;
  color: #fff;
}

.layui-m-anim-scale {
  animation-name: layui-m-anim-scale;
  -webkit-animation-name: layui-m-anim-scale;
}

.layui-m-layerchild {
  position: relative;
  display: inline-block;
  text-align: left;
  background-color: #fff;
  font-size: 14px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgb(0 0 0 / 10%);
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.layui-m-layer2 .layui-m-layercont {
  text-align: center;
  padding: 0;
  line-height: 0;
}

.layui-m-layercont {
  padding: 50px 30px;
  line-height: 22px;
  text-align: center;
}

.layui-m-layer2 .layui-m-layercont i:first-child {
  margin-left: 0;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.layui-m-layer2 .layui-m-layercont i {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
}

.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.layui-m-layer2 .layui-m-layercont i {
  -webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.layui-m-layer2 .layui-m-layercont i {
  background-color: #7be19f !important;
}

@keyframes layui-m-anim-loading {

  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}